<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-steps :active="step" finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="规格参数"></el-step>
                    <el-step title="销售属性"></el-step>
                    <el-step title="SKU信息"></el-step>
                    <el-step title="保存完成"></el-step>
                </el-steps>
            </el-col>
            <el-col :span="24" v-show="step == 0">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <el-form ref="spuBaseForm" :model="spu" label-width="120px" :rules="spuBaseInfoRules">
                        <el-form-item label="商品名称" prop="spuName">
                            <el-input v-model="spu.spuName"></el-input>
                        </el-form-item>
                        <el-form-item label="商品描述" prop="spuDescription">
                            <el-input v-model="spu.spuDescription"></el-input>
                        </el-form-item>
                        <el-form-item label="选择分类" prop="catalogId">
                            <category-cascader></category-cascader>
                        </el-form-item>
                        <el-form-item label="选择品牌" prop="brandId">
                            <brand-select></brand-select>
                        </el-form-item>
                        <el-form-item label="商品重量(Kg)" prop="weight">
                            <el-input-number v-model.number="spu.weight" :min="0" :precision="3"
                                :step="0.1"></el-input-number>
                        </el-form-item>
                        <el-form-item label="设置积分" prop="bounds">
                            <label>金币</label>
                            <el-input-number style="width:130px" placeholder="金币" v-model="spu.bounds.buyBounds" :min="0"
                                controls-position="right"></el-input-number>
                            <label style="margin-left:15px">成长值</label>
                            <el-input-number style="width:130px" placeholder="成长值" v-model="spu.bounds.growBounds" :min="0"
                                controls-position="right">
                                <template slot="prepend">成长值</template>
                            </el-input-number>
                        </el-form-item>
                        <el-form-item label="商品介绍" prop="decript">
                            <multi-upload v-model="spu.decript"></multi-upload>
                        </el-form-item>

                        <el-form-item label="商品图集" prop="images">
                            <multi-upload v-model="spu.images"></multi-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="collectSpuBaseInfo">下一步：设置基本参数</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step == 1">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <el-tabs tab-position="left" style="width:98%">
                        <el-tab-pane :label="group.attrGroupName" v-for="(group, gidx) in dataResp.attrGroups"
                            :key="group.attrGroupId">
                            <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spu.baseAttrs[0] = [{attrId:xx,val:}]-->
                            <el-form ref="form" :model="spu">
                                <el-form-item :label="attr.attrName" v-for="(attr, aidx) in group.attrs" :key="attr.attrId">
                                    <el-input v-model="dataResp.baseAttrs[gidx][aidx].attrId" type="hidden"
                                        v-show="false"></el-input>
                                    <el-select v-model="dataResp.baseAttrs[gidx][aidx].attrValues"
                                        :multiple="attr.valueType == 1" filterable allow-create default-first-option
                                        placeholder="请选择或输入值">
                                        <el-option v-for="(val, vidx) in attr.valueSelect.split(';')" :key="vidx"
                                            :label="val" :value="val"></el-option>
                                    </el-select>
                                    <el-checkbox v-model="dataResp.baseAttrs[gidx][aidx].showDesc" :true-label="1"
                                        :false-label="0">快速展示</el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div style="margin:auto">
                        <el-button type="primary" @click="step = 0">上一步</el-button>
                        <el-button type="success" @click="generateSaleAttrs">下一步：设置销售属性</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step == 2">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择销售属性</span>
                            <el-form ref="saleform" :model="spu">
                                <el-form-item :label="attr.attrName" v-for="(attr, aidx) in dataResp.saleAttrs"
                                    :key="attr.attrId">
                                    <el-input v-model="dataResp.tempSaleAttrs[aidx].attrId" type="hidden"
                                        v-show="false"></el-input>
                                    <el-checkbox-group v-model="dataResp.tempSaleAttrs[aidx].attrValues">
                                        <el-checkbox v-if="dataResp.saleAttrs[aidx].valueSelect != ''" :label="val"
                                            v-for="val in dataResp.saleAttrs[aidx].valueSelect.split(';')"
                                            :key="val"></el-checkbox>
                                        <div style="margin-left:20px;display:inline">
                                            <el-button v-show="!inputVisible[aidx].view" class="button-new-tag" size="mini"
                                                @click="showInput(aidx)">+自定义</el-button>
                                            <el-input v-show="inputVisible[aidx].view" v-model="inputValue[aidx].val"
                                                :ref="'saveTagInput' + aidx" size="mini" style="width:150px"
                                                @keyup.enter.native="handleInputConfirm(aidx)"
                                                @blur="handleInputConfirm(aidx)"></el-input>
                                        </div>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                        </div>
                        <el-button type="primary" @click="step = 1">上一步</el-button>
                        <el-button type="success" @click="generateSkus">下一步：设置SKU信息</el-button>
                    </el-card>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step == 3">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <el-table :data="spu.skus" style="width: 100%">
                        <el-table-column label="属性组合">
                            <el-table-column :label="item.attrName" v-for="(item, index) in dataResp.tableAttrColumn"
                                :key="item.attrId">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.attr[index].attrValue }}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="skuName">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.skuName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="标题" prop="skuTitle">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.skuTitle"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="副标题" prop="skuSubtitle">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.skuSubtitle"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="价格" prop="price">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.price"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-col :span="24">
                                        <label style="display:block;float:left">选择图集 或</label>
                                        <multi-upload style="float:left;margin-left:10px;" :showFile="false"
                                            :listType="'text'" v-model="uploadImages"></multi-upload>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-divider></el-divider>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-card style="width:170px;float:left;margin-left:15px;margin-top:15px;"
                                            :body-style="{ padding: '0px' }" v-for="(img, index) in spu.images"
                                            :key="index">
                                            <img :src="img" style="width:160px;height:120px" />
                                            <div style="padding: 14px;">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-checkbox v-model="scope.row.images[index].imgUrl"
                                                            :true-label="img" false-label></el-checkbox>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-tag v-if="scope.row.images[index].defaultImg == 1">
                                                            <input type="radio" checked :name="scope.row.skuName"
                                                                @change="checkDefaultImg(scope.row, index, img)" />设为默认
                                                        </el-tag>
                                                        <el-tag v-else>
                                                            <input type="radio" :name="scope.row.skuName"
                                                                @change="checkDefaultImg(scope.row, index, img)" />设为默认
                                                        </el-tag>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                <!-- 折扣，满减，会员价 -->
                                <el-form :model="scope.row">
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="设置折扣">
                                                <label>满</label>
                                                <el-input-number style="width:160px" :min="0" controls-position="right"
                                                    v-model="scope.row.fullCount"></el-input-number>
                                                <label>件</label>

                                                <label style="margin-left:15px;">打</label>
                                                <el-input-number style="width:160px" v-model="scope.row.discount"
                                                    :precision="2" :max="1" :min="0" :step="0.01"
                                                    controls-position="right"></el-input-number>
                                                <label>折</label>
                                                <el-checkbox v-model="scope.row.countStatus" :true-label="1"
                                                    :false-label="0">可叠加优惠</el-checkbox>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-form-item label="设置满减">
                                                <label>满</label>
                                                <el-input-number style="width:160px" v-model="scope.row.fullPrice"
                                                    :step="100" :min="0" controls-position="right"></el-input-number>
                                                <label>元</label>
                                                <label style="margin-left:15px;">减</label>
                                                <el-input-number style="width:160px" v-model="scope.row.reducePrice"
                                                    :step="10" :min="0" controls-position="right"></el-input-number>
                                                <label>元</label>
                                                <el-checkbox v-model="scope.row.priceStatus" :true-label="1"
                                                    :false-label="0">可叠加优惠</el-checkbox>
                                            </el-form-item>
                                        </el-col>

                                        <el-col :span="24">
                                            <el-form-item label="设置会员价" v-if="scope.row.memberPrice.length > 0">
                                                <br />
                                                <!--   @change="handlePriceChange(scope,mpidx,$event)" -->
                                                <el-form-item v-for="(mp, mpidx) in scope.row.memberPrice" :key="mp.id">
                                                    {{ mp.name }}
                                                    <el-input-number style="width:160px"
                                                        v-model="scope.row.memberPrice[mpidx].price" :precision="2" :min="0"
                                                        controls-position="right"></el-input-number>
                                                </el-form-item>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" @click="step = 2">上一步</el-button>
                    <el-button type="success" @click="submitSkus">下一步：保存商品信息</el-button>
                </el-card>
            </el-col>
            <el-col :span="24" v-show="step == 4">
                <el-card class="box-card" style="width:80%;margin:20px auto">
                    <h1>保存成功</h1>
                    <el-button type="primary" @click="addAgian">继续添加</el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryCascader from "../common/category-cascader";
import BrandSelect from "../common/brand-select";
import MultiUpload from "@/components/upload/multiUpload";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: { CategoryCascader, BrandSelect, MultiUpload },
    props: {},
    data() {
        return {
            catPathSub: null,
            brandIdSub: null,
            uploadDialogVisible: false,
            uploadImages: [],
            step: 0,
            //spu_name  spu_description  catalog_id  brand_id  weight  publish_status
            spu: {
                //要提交的数据
                spuName: "",
                spuDescription: "",
                catalogId: 0,
                brandId: "",
                weight: "",
                publishStatus: 0,
                decript: [], //商品详情
                images: [], //商品图集，最后sku也可以新增
                bounds: {
                    //积分
                    buyBounds: 0,
                    growBounds: 0
                },
                baseAttrs: [], //基本属性
                skus: [] //所有sku信息
            },
            spuBaseInfoRules: {
                spuName: [
                    { required: true, message: "请输入商品名字", trigger: "blur" }
                ],
                spuDescription: [
                    { required: true, message: "请编写一个简单描述", trigger: "blur" }
                ],
                catalogId: [
                    { required: true, message: "请选择一个分类", trigger: "blur" }
                ],
                brandId: [
                    { required: true, message: "请选择一个品牌", trigger: "blur" }
                ],
                decript: [
                    { required: true, message: "请上传商品详情图集", trigger: "blur" }
                ],
                images: [
                    { required: true, message: "请上传商品图片集", trigger: "blur" }
                ],
                weight: [
                    {
                        type: "number",
                        required: true,
                        message: "请填写正确的重量值",
                        trigger: "blur"
                    }
                ]
            },
            dataResp: {
                //后台返回的所有数据
                attrGroups: [],
                baseAttrs: [],
                saleAttrs: [],
                tempSaleAttrs: [],
                tableAttrColumn: [],
                memberLevels: [],
                steped: [false, false, false, false, false]
            },
            inputVisible: [],
            inputValue: []
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        uploadImages(val) {
            //扩展每个skus里面的imgs选项
            let imgArr = Array.from(new Set(this.spu.images.concat(val)));

            //{imgUrl:"",defaultImg:0} 由于concat每次迭代上次，有很多重复。所以我们必须得到上次+这次的总长

            this.spu.skus.forEach((item, index) => {
                let len = imgArr.length - this.spu.skus[index].images.length; //还差这么多
                if (len > 0) {
                    let imgs = new Array(len);
                    imgs = imgs.fill({ imgUrl: "", defaultImg: 0 });
                    this.spu.skus[index].images = item.images.concat(imgs);
                }
            });

            this.spu.images = imgArr; //去重
            console.log("this.spu.skus", this.spu.skus);
        }
    },
    //方法集合
    methods: {
        addAgian() {
            this.step = 0;
            this.resetSpuData();
        },
        resetSpuData() {
            this.spu = {
                spuName: "",
                spuDescription: "",
                catalogId: 0,
                brandId: "",
                weight: "",
                publishStatus: 0,
                decript: [],
                images: [],
                bounds: {
                    buyBounds: 0,
                    growBounds: 0
                },
                baseAttrs: [],
                skus: []
            };
        },
        handlePriceChange(scope, mpidx, e) {
            this.spu.skus[scope.$index].memberPrice[mpidx].price = e;
        },
        getMemberLevels() {
            this.$http({
                url: this.$http.adornUrl("/member/memberlevel/list"),
                method: "get",
                params: this.$http.adornParams({
                    page: 1,
                    limit: 500
                })
            })
                .then(({ data }) => {
                    this.dataResp.memberLevels = data.page.list;
                })
                .catch(e => {
                    console.log(e);
                });
        },
        showInput(idx) {
            console.log("``````", this.view);
            this.inputVisible[idx].view = true;
            // this.$refs['saveTagInput'+idx].$refs.input.focus();
        },
        checkDefaultImg(row, index, img) {
            console.log("默认图片", row, index);
            //这个图片被选中了，
            row.images[index].imgUrl = img; //默认选中
            row.images[index].defaultImg = 1; //修改标志位;
            //修改其他人的标志位
            row.images.forEach((item, idx) => {
                if (idx != index) {
                    row.images[idx].defaultImg = 0;
                }
            });
        },
        handleInputConfirm(idx) {
            let inputValue = this.inputValue[idx].val;
            if (inputValue) {
                // this.dynamicTags.push(inputValue);
                if (this.dataResp.saleAttrs[idx].valueSelect == "") {
                    this.dataResp.saleAttrs[idx].valueSelect = inputValue;
                } else {
                    this.dataResp.saleAttrs[idx].valueSelect += ";" + inputValue;
                }
            }
            this.inputVisible[idx].view = false;
            this.inputValue[idx].val = "";
        },
        collectSpuBaseInfo() {
            //spuBaseForm
            this.$refs.spuBaseForm.validate(valid => {
                if (valid) {
                    this.step = 1;
                    this.showBaseAttrs();
                } else {
                    return false;
                }
            });
        },
        generateSaleAttrs() {
            //把页面绑定的所有attr处理到spu里面,这一步都要做
            this.spu.baseAttrs = [];
            this.dataResp.baseAttrs.forEach(item => {
                item.forEach(attr => {
                    let { attrId, attrValues, showDesc } = attr;
                    //跳过没有录入值的属性
                    if (attrValues != "") {
                        if (attrValues instanceof Array) {
                            //多个值用;隔开
                            attrValues = attrValues.join(";");
                        }
                        this.spu.baseAttrs.push({ attrId, attrValues, showDesc });
                    }
                });
            });
            console.log("baseAttrs", this.spu.baseAttrs);
            this.step = 2;
            this.getShowSaleAttr();
        },
        generateSkus() {
            this.step = 3;

            //根据笛卡尔积运算进行生成sku
            let selectValues = [];
            this.dataResp.tableAttrColumn = [];
            this.dataResp.tempSaleAttrs.forEach(item => {
                if (item.attrValues.length > 0) {
                    selectValues.push(item.attrValues);
                    this.dataResp.tableAttrColumn.push(item);
                }
            });

            let descartes = this.descartes(selectValues);
            //[["黑色","6GB","移动"],["黑色","6GB","联通"],["黑色","8GB","移动"],["黑色","8GB","联通"],
            //["白色","6GB","移动"],["白色","6GB","联通"],["白色","8GB","移动"],["白色","8GB","联通"],
            //["蓝色","6GB","移动"],["蓝色","6GB","联通"],["蓝色","8GB","移动"],["蓝色","8GB","联通"]]
            console.log("生成的组合", JSON.stringify(descartes));
            //有多少descartes就有多少sku
            let skus = [];

            descartes.forEach((descar, descaridx) => {
                let attrArray = []; //sku属性组
                descar.forEach((de, index) => {
                    //构造saleAttr信息
                    let saleAttrItem = {
                        attrId: this.dataResp.tableAttrColumn[index].attrId,
                        attrName: this.dataResp.tableAttrColumn[index].attrName,
                        attrValue: de
                    };
                    attrArray.push(saleAttrItem);
                });
                //先初始化几个images，后面的上传还要加
                let imgs = [];
                this.spu.images.forEach((img, idx) => {
                    imgs.push({ imgUrl: "", defaultImg: 0 });
                });

                //会员价，也必须在循环里面生成，否则会导致数据绑定问题
                let memberPrices = [];
                if (this.dataResp.memberLevels.length > 0) {
                    for (let i = 0; i < this.dataResp.memberLevels.length; i++) {
                        if (this.dataResp.memberLevels[i].priviledgeMemberPrice == 1) {
                            memberPrices.push({
                                id: this.dataResp.memberLevels[i].id,
                                name: this.dataResp.memberLevels[i].name,
                                price: 0
                            });
                        }
                    }
                }
                //;descaridx，判断如果之前有就用之前的值;
                let res = this.hasAndReturnSku(this.spu.skus, descar);
                if (res === null) {
                    skus.push({
                        attr: attrArray,
                        skuName: this.spu.spuName + " " + descar.join(" "),
                        price: 0,
                        skuTitle: this.spu.spuName + " " + descar.join(" "),
                        skuSubtitle: "",
                        images: imgs,
                        descar: descar,
                        fullCount: 0,
                        discount: 0,
                        countStatus: 0,
                        fullPrice: 0.0,
                        reducePrice: 0.0,
                        priceStatus: 0,
                        memberPrice: new Array().concat(memberPrices)
                    });
                } else {
                    skus.push(res);
                }
            });
            this.spu.skus = skus;
            console.log("结果!!!", this.spu.skus, this.dataResp.tableAttrColumn);
        },
        //判断如果包含之前的sku的descar组合，就返回这个sku的详细信息；
        hasAndReturnSku(skus, descar) {
            let res = null;
            if (skus.length > 0) {
                for (let i = 0; i < skus.length; i++) {
                    if (skus[i].descar.join(" ") == descar.join(" ")) {
                        res = skus[i];
                    }
                }
            }
            return res;
        },
        getShowSaleAttr() {
            //获取当前分类可以使用的销售属性
            if (!this.dataResp.steped[1]) {
                this.$http({
                    url: this.$http.adornUrl(
                        `/produce/attr/sale/list/${this.spu.catalogId}`
                    ),
                    method: "get",
                    params: this.$http.adornParams({
                        page: 1,
                        limit: 500
                    })
                }).then(({ data }) => {
                    this.dataResp.saleAttrs = data.page.list;
                    data.page.list.forEach(item => {
                        this.dataResp.tempSaleAttrs.push({
                            attrId: item.attrId,
                            attrValues: [],
                            attrName: item.attrName
                        });
                        this.inputVisible.push({ view: false });
                        this.inputValue.push({ val: "" });
                    });
                    this.dataResp.steped[1] = true;
                });
            }
        },
        showBaseAttrs() {
            if (!this.dataResp.steped[0]) {
                this.$http({
                    url: this.$http.adornUrl(
                        `/produce/attrgroup/${this.spu.catalogId}/withattr`
                    ),
                    method: "get",
                    params: this.$http.adornParams({})
                }).then(({ data }) => {
                    //先对表单的baseAttrs进行初始化
                    data.data.forEach(item => {
                        let attrArray = [];
                        item.attrs.forEach(attr => {
                            attrArray.push({
                                attrId: attr.attrId,
                                attrValues: "",
                                showDesc: attr.showDesc
                            });
                        });
                        this.dataResp.baseAttrs.push(attrArray);
                    });
                    this.dataResp.steped[0] = 0;
                    this.dataResp.attrGroups = data.data;
                });
            }
        },

        submitSkus() {
            console.log("~~~~~", JSON.stringify(this.spu));
            this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/produce/spuinfo/save"),
                        method: "post",
                        data: this.$http.adornData(this.spu, false)
                    }).then(({ data }) => {
                        if (data.code == 0) {
                            this.$message({
                                type: "success",
                                message: "新增商品成功!"
                            });
                            this.step = 4;
                        } else {
                            this.$message({
                                type: "error",
                                message: "保存失败，原因【" + data.msg + "】"
                            });
                        }
                    });
                })
                .catch(e => {
                    console.log(e);
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        //笛卡尔积运算
        descartes(list) {
            //parent上一级索引;count指针计数
            var point = {};

            var result = [];
            var pIndex = null;
            var tempCount = 0;
            var temp = [];

            //根据参数列生成指针对象
            for (var index in list) {
                if (typeof list[index] == "object") {
                    point[index] = { parent: pIndex, count: 0 };
                    pIndex = index;
                }
            }

            //单维度数据结构直接返回
            if (pIndex == null) {
                return list;
            }

            //动态生成笛卡尔积
            while (true) {
                for (var index in list) {
                    tempCount = point[index]["count"];
                    temp.push(list[index][tempCount]);
                }

                //压入结果数组
                result.push(temp);
                temp = [];

                //检查指针最大值问题
                while (true) {
                    if (point[index]["count"] + 1 >= list[index].length) {
                        point[index]["count"] = 0;
                        pIndex = point[index]["parent"];
                        if (pIndex == null) {
                            return result;
                        }

                        //赋值parent进行再次检查
                        index = pIndex;
                    } else {
                        point[index]["count"]++;
                        break;
                    }
                }
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() { },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.catPathSub = PubSub.subscribe("catPath", (msg, val) => {
            this.spu.catalogId = val[val.length - 1];
        });
        this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
            this.spu.brandId = val;
        });
        this.getMemberLevels();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() {
        PubSub.unsubscribe(this.catPathSub);
        PubSub.unsubscribe(this.brandIdSub);
    }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
  </style>